import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { Tabs, NavBar } from 'antd-mobile';
import withRedux from 'next-redux-wrapper';
import Router from 'next/router';
import Content from '../../views/common/Content';
import initStore from '../../store/initStore';
import NewsListView from '../../views/news/NewsListView';
import { setSelectedTabIndexAction, goBackAction, increaseClickCountAction, asyncGetListAction } from '../../store/actions/news/listAction';
import LeftContentView from '../../views/common/LeftContentView';

class NewsListScreen extends PureComponent
{
    tabs = [
        {title: '旅游新闻', idKey: 'know/dynamic/news'},
        {title: '节庆新闻', idKey: 'know/dynamic/FestivalNews'},
    ];
    static getInitialProps({ store, isServer })
    {
        if(!isServer)
        {
            return {};
        }
        return store.dispatch(asyncGetListAction('know/dynamic/news', 1))
            .then(()=>{
                return {
                    isServer,
                };
            });
    }
    componentDidMount()
    {
        this.onItemClick = this.onItemClick.bind(this);
    }
    isBrowser()
    {
        return typeof window !== 'undefined';
    }
    render()
    {
        let listViewHeight = this.isBrowser() ? (window.innerHeight - (45 + 44)) : 550;

        return (
            <div>
                <NavBar mode="dark" 
                    className="navBar"
                    leftContent={<LeftContentView
                        ref={(view) => { this.LeftContentView = view ? view.getWrappedInstance() : this.scrollView; }}
                        goBackAction={goBackAction}
                        history={this.props.history}
                    />}
                    onLeftClick={() => {
                        this.LeftContentView.goHome();
                    }}>
                    旅游动态
                </NavBar>
                <Content>
                    <Tabs tabs={this.tabs}
                        initialPage={this.props.selectedTabIndex}
                        prerenderingSiblingsNumber={0}
                        onChange={(tab, index) => { 
                            this.props.dispatch(setSelectedTabIndexAction(index));
                        }}
                        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}>
                        {
                            this.tabs.map((item, index)=><NewsListView key={index} 
                                idKey={item.idKey}
                                ref={(listView)=>{
                                    if(listView)
                                    {
                                        this.tabs[index].listView = listView.getWrappedInstance();
                                    }
                                }}
                                onItemClick={(_item)=>{
                                    this.onItemClick(_item, item.idKey);
                                }}
                                height={listViewHeight}/>)
                        }
                    </Tabs>
                </Content>
            </div>
        );
    }
    onItemClick(item, key)
    {
        if(!item)
        {
            return;
        }
        // for(let i = 0; i < this.tabs.length; i++)
        // {
        //     let listView: NewsListView = this.tabs[i].listView;
        //     if(listView)
        //     {
        //         listView.cacheScrollOffset();
        //     }
        // }
        // let dispatch = this.props.dispatch;
        // // this.props.history.push(`${this.props.match.url}/detail/${item.ContentCode}`);
        // Router.push(`/news/detail?code=${item.ContentCode}`);
        // dispatch(increaseClickCountAction(key, item.ContentCode));
    }
}

const mapStateToProps = function(state)
{
    return {
        selectedTabIndex: state.news.listScreen.selectedTabIndex,
    };
};

NewsListScreen = withRedux(initStore, mapStateToProps)(NewsListScreen);

export default NewsListScreen;